<template> 
        <BubbleMenu :editor="editorinStance">
               <div v-if="editorinStance" class="bubleMenulist">
                 <button
                 v-for="item in ArrayColors"
                 :key="item"
                 :style="{background:item}"
                 @click="()=>handeActive(item)" :class="{ 'is-active': editorinStance.isActive('textStyle', { color: item })}"> 
                 </button>
               </div>
        </BubbleMenu>
</template>
<script  lang="ts"> 
import './style.less';
import {BubbleMenu } from "./menus"; 
import { defineComponent,ref, unref } from "vue"; 
import Eventbus from '../../urtls/eventBus'; 
export default defineComponent({
          name:'asd',
          components:{
                BubbleMenu
          }, 
          props:['editor'],
          setup(props){
                let ArrayColors = ['#958DF1','#F98181','#FBBC88','#70CFF8','#94FADB','#B9F18D',]
                let editorinStance = ref();
                Eventbus.on('onCreateBubbleMenu',(e)=>{
                        editorinStance.value=e;  
                })
                const handeActive = (item)=>{
                      
                        props.editor.chain().focus().setColor(item).run();
                }
                
             
                return {
                       editorinStance,
                       ArrayColors,
                       handeActive
                }
          }
})
</script>